<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>arthur.js</title>
        <script type="text/javascript" src="../dist/arthur.js"></script>
    </head>
    <body>
        <div ms-controller='test' id="test" >
            <xmp is='ms-button' >{{@bb}}</xmp>
            <p>{{@aa}}</p>
            <ul>
                <li ms-for="el in @arr">{{el}}</li>
            </ul>
            <p><input ms-duplex="@aa">{{@aa}}</p>
            <input ms-duplex="@bb">{{@bb}}
            <p><button ms-click="@click" type='button'>click</button></p>
        </div>
        <script type="text/javascript">
           
        
avalon.component('ms-button', {
    template: '<button type="button" ><span><slot /></span></button>',
    defaults: {
        buttonText: "button",
    },
    soleSlot: 'buttonText'
})
var vm = avalon.define({
    $id: 'test',
    aa: 'aa',
    bb:'button value',
    click: function(){
        alert(this.bb)
    },
    arr: [1,2,3]
})
avalon.scan(document.getElementById('test'),vm)

        </script>
    </body>
</html>